<template>
  <div class="wms-container"  id="app">
    <div class="wms-header">
      <wms-header></wms-header>
    </div>
    <div class="wms-content" id="WMSContent">
      <div class="wms-content-box">
        <router-view />
      </div>
      <div class="wms-footer">
          <wms-footer></wms-footer>
      </div>
    </div>
  </div>
</template>
<style scoped>
.wms-container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.wms-content{
  flex: 1;
  background: #e9ecef!important;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.wms-content-box{
  padding: .2rem 0;
  flex: 1;
}
</style>

<script>
import wmsHeader from "./layout/header";
import wmsFooter from "./layout/footer";
export default {
  name: "App",
  data(){
    return {}
  },
  components:{
    wmsHeader,
    wmsFooter
  }
};
</script>
